<template>
	<view class="p-50 p-t-30 left" style="width: 650rpx;">
		<text class="ts-50 tb wa left m-b-50">
			<text class="tc-green">消息通知</text>
		</text>
		<view>
			<view v-if="!isEmpty">
				<view class="ts-30 wa left m-t-30 ju-list" v-for="(item, index) in noticeList" :key="index" @click="noticeTab(item.type)">
					<img :src="`/static/img/me/notice${item.type}.svg`" alt="SVG Icon" class="notice-icon"/>
					<view class="notice-content">
						<text class="wa left m-b-20">
							<text class="ts-32 tb tc-green left">{{['', '预警警告', '平台通知', '订单通知', '续费通知'][item.type]}}</text>
							<text class="icon-orange right ts-26" v-if="item.is_read === 1"></text>
						</text>
						<text class="wa left m-b-30 ts-26">
							<text class="tc-gray left">{{item.content}}</text>
							<!-- <text class="tc-gray right">{{item.createtime}}</text> -->
						</text>
					</view>
				</view>
			</view>
			<view v-if="isEmpty">
				<xy-empty text="暂无记录" :imgsrc="'notice'" />
			</view>
		</view>
		<xy-tabbar />
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import xyTabbar from '@/components/xy-tabbar';
	import xyEmpty from '@/components/xy-empty';
	export default {
		components: {
			xyEmpty,
			xyTabbar
		},
		data() {
			return {
				css:{},
				search:'',
				isEmpty: true,
				noticeList: [],
				currentPage: 1,
				isLoading:true,
				lastPage: 1,
				type: 1,
				imei: '',
				loadStatus: 'loadmore',
			}
		},
		computed: {
			...mapState(['user'])
		},
		onLoad(options) {
			this.$xyfun.setNavBar(' ');
			this.imei = options.imei
			this.css = this.$xyfun.css();
			// uni.hideHomeButton()
			
		},
		onShow() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData();
		},
		methods: {
			noticeTab(type) {
				uni.navigateTo({
					url: `/pages/notice?type=${type}`
				})
			},
			loadData(){
				if (this.user.isLogin) {
					this.$api.get({
						url: '/user/user/message',
						loadingTip:'加载中...',
						success: res => {
							this.noticeList = res
							this.isEmpty = !this.noticeList.length
							uni.stopPullDownRefresh()
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: '当前页面需要进行登录，确认是否登录',
						success: res => {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/user/login'
								})
							}
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.ju-list {
		border-bottom: 1rpx solid #dcdada;
	}
	.notice-content {
		width: 540rpx;
		float: right;
		.icon-orange {
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			border-radius: 10rpx;
			background: orange;
			position: relative;
			top: 10rpx;
		}
	}
	.notice-icon {
		width: 80rpx;
		height: 80rpx;
		float: left;
	}
</style>
